<template>
    <div class="app-contain">
        <div class="components-container">
            <TableLayout form-title="">
                <div slot="form-title" class="table-title"></div>   
                <el-form class="formInline" label-width="130px" slot="form" :rules="rules" :model="formInline" ref="formInline">  
                    <el-row :gutter="41"> 
                        <el-col :span="8">
                            <el-form-item label="消费开始日期：" prop="startDate"> 
                                <el-date-picker v-model="formInline.startDate" :editable="false" type="date" placeholder="选择开始日期" :picker-options="pickerOptions1" @change="dateChange1" style="width:100%">
                                </el-date-picker>            
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="消费结束日期：" prop="endDate"> 
                                <el-date-picker v-model="formInline.endDate" :editable="false" type="date" placeholder="选择结束日期" :picker-options="pickerOptions2"  @change="dateChange2" style="width:100%">
                                </el-date-picker>          
                            </el-form-item>
                        </el-col>
                        <el-col :span="8"> 
                            <el-button type="primary" class="top-btn" @click="onSubmit('formInline')">查询</el-button>
                        </el-col>
                    </el-row :gutter="41">
                </el-form>
                <div class="table-title" slot="table-title">
                </div>
                <el-table ref="singleTable" :data="dataApply" style="width:100%" border @selection-change="handleSelectionChange" v-loading="loading">
                                        
                    <el-table-column label="消费时间" align="center">
                        <template scope="scope">
                            <span>{{scope.row.sCreateTime || '--'}}</span>
                        </template> 
                    </el-table-column>

                    <el-table-column label="卡号" align="center">
                        <template scope="scope">
                            <span>{{scope.row.sCardNumber || '--'}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="姓名" align="center">
                        <template scope="scope">
                            <span>{{scope.row.sStudentName || scope.row.sTeacherName}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="e学云ID号" align="center">
                        <template scope="scope">
                            <span>{{scope.row.sCardholderExueCode || '--'}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="消费地点" align="center" min-width="250">
                        <template scope="scope">
                            <span>{{scope.row.sRemark || '--'}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="金额（元）" align="center">
                        <template scope="scope">
                            <span>{{scope.row.sMoney.toFixed(2)}}</span>
                        </template>
                    </el-table-column>                   
                </el-table>
                <div class="pagination-container" style="text-align:right">
                    <el-pagination
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="listQuery.total"
                        :current-page.sync="listQuery.page"
                        :page-sizes="config.pageSizes"
                        :page-size="config.pageSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>            
            </TableLayout>    
        </div>
    </div>
</template>
 
<script>
import {pageExpenseSettlementDetail} from 'api/oneCardSolution'
import TableLayout from 'components/TableLayout';
import { mapState, mapActions } from 'vuex';
import { mapGetters } from 'vuex';
import moment from 'moment';
import startDate from 'components/Datepicker/startDate';
import endDate from 'components/Datepicker/endDate';
export default{
    components: { TableLayout, startDate, endDate},
    data() {
        return {
            formInline: {
                startDate: '',
                endDate: ''
            },
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            pickerOptions2: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            status: '',
            dataRange: '',
            dataApply: [],
            loading: false,
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            rules: {
                startDate: [
                    {required: true, type: 'date', message: '开始日期不能为空', trigger: 'change'}
                ],
                endDate: [
                    {required: true, type: 'date', message: '结束日期不能为空', trigger: 'change'}
                ]
            }
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'schoolId'
        ])
    },
    created() {
        // this.searchFetchData()
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        dateChange1(date) {
            this.pickerOptions2 = {
                disabledDate(time) {
                    return time.getTime() < new Date(date).getTime() - 864e5 || time.getTime() > Date.now();
                }
            }
        },
        dateChange2(date) {
            this.pickerOptions1 = {
                disabledDate(time) {
                    return time.getTime() > new Date(date).getTime() || time.getTime() > Date.now();
                }
            }
        },
        // 表单查询
        onSubmit(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.listQuery.page = 1;
                    this.searchFetchData();
                } else {
                    return false;
                }
            });
        },

        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {      
            this.listQuery.page = val;
            this.searchFetchData();
        },
        searchFetchData() {
            this.loading = true;
            let startDate = this.formInline.startDate==''?'':moment(this.formInline.startDate).format('YYYY-MM-DD');
            let endDate = this.formInline.endDate==''?'':moment(this.formInline.endDate).format('YYYY-MM-DD');
            pageExpenseSettlementDetail(this.listQuery.page, this.config.pageSize, this.schoolId, startDate, endDate).then(response => {
                this.dataApply = response.data.content.list;
                this.listQuery.total = response.data.content.pagination.total;
                this.loading = false;
            });
        },
        goToReviseRole(pId) {
            this.$router.push({
                path: `checkDetails/${pId}`
            });
        }
    }
}
</script>
 
<style rel="stylesheet/scss" lang="scss" scoped>
.app-contain{
    position: relative;
}
.components-container{
   width:100%;
   margin:0;
}
.block{
    padding-bottom:10px;
 
}
.el-row{
  background:#fff; 
  line-height:32px;
  border-radius:3px;
  
}
</style>